<template>
  <div class="content">
    <div class="top">
      <div class="margin">
        <img :src="orderForm.goodsImage" mode="scaleToFill" />
        <div class="right">
          <p class="ellipsis-2">{{orderForm.goodsName}}</p>
          <div>
            <span>￥{{orderForm.goodsAmount}}</span>
            <p>×{{orderForm.goodsNum}}</p>
          </div>
          <p class="allMoney">
            总价：
            <span>￥{{orderForm.realAmount}}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="orderTitle">订单信息</div>
    <div class="list">
      <div v-for="(item,index) in list" :key="index">
        <div>
          <span>{{item.label}}</span>
          <p>{{item.value}}</p>
        </div>
        <p v-if="item.isFind" @click="findLogisticsClick">查看</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  FIND_STOCK_ORDER_INFO,
  FIND_STOCK_GOODS_INFO,
  FIND_SHOP_GOODS_INFO
} from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      goods: {},
      saleNum: null,
      modeForm: {
        '0': '物流',
        '1': '到店自提',
        '2': '商家上门',
        '3': '店内消费'
      },
      orderState: {
        '0': '待付款',
        '1': '待收货',
        '2': '已取消',
        '3': '已收货',
        '4': '退款中',
        '5': '已退款',
        // '6': '用户删除订单',
        '7': '已评价',
        '8': '拒绝退款'
      }
    }
  },
  computed: {
    orderForm () {
      return {
        ...this.form,
        realAmount: (this.form.goodsAmount * this.form.goodsNum * 1).toFixed(2),
        goodsAmount: (this.form.goodsAmount * 1).toFixed(2)
      }
    },
    goodsForm () {
      return {
        ...this.goods
      }
    },
    list () {
      return [
        {
          label: '订单编号：',
          value: this.form.orderNo,
          isFind: false
        },
        {
          label: '下单时间：',
          value: this.form.orderDate,
          isFind: false
        },
        {
          label: '订单状态：',
          value: this.orderState[this.form.state],
          isFind: false
        },
        {
          label: `赊货锁额(${this.goods.stockCreditPre}%)`,
          // value: (
          //   this.goods.stockSupplyNum *
          //   this.goods.stockSupplyCost *
          //   (this.goods.stockCreditPre * 0.01)
          // ).toFixed(2),
          value: this.form.lockAmount,
          isFind: false
        },
        {
          label: '取货方式',
          value: this.modeForm[this.form.shippingMode],
          isFind: !!(
            (this.form.state === '1' || this.form.state === '8') &&
            this.form.shippingMode === '0'
          )
        }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getStockOrderInfo()
  },
  methods: {
    findLogisticsClick () {
      const vm = this
      vm.$router.push(
        `/pages/data-analyze/stock/my/logistics/main?orderNo=${vm.form.orderNo}`
      )
    },
    getStockOrderInfo () {
      const vm = this
      FIND_STOCK_ORDER_INFO(
        getCurrentPageParams('orderNo') || '427553574554173440'
      )
        .then(r => {
          if (r.data.code === '0') {
            // vm.form = r.data.data
            let obj = r.data.data.orderGoodsList
              ? r.data.data.orderGoodsList[0]
              : {}
            vm.form = { ...r.data.data, ...obj }
            vm.getStockGoodsInfo(vm.form.goodsNo)
            vm.getGoodsInfo(vm.form.goodsNo)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getStockGoodsInfo (goodsNo) {
      const vm = this
      FIND_STOCK_GOODS_INFO(goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            vm.goods = r.data.data
            vm.goods.stockSupplyCost = (vm.goods.stockSupplyCost * 1).toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getGoodsInfo (goodsNo) {
      const vm = this
      FIND_SHOP_GOODS_INFO(goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            // 销售数量
            if (r.data.data) {
              if (r.data.data.saleNum) {
                let { saleNum } = r.data.data
                vm.saleNum = saleNum
              } else {
                vm.saleNum = 0
              }
            } else {
              vm.saleNum = 0
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  background: #f6f8f9;
  > .top {
    width: 100%;
    margin: 0 auto 15px;
    background: #fff;
    border-bottom: 1px solid #f3f4f8;
    > .margin {
      width: 90%;
      margin: auto;
      display: flex;
      align-items: center;
      padding: 15px 0;
      > img {
        width: 105px;
        height: 105px;
        border-radius: 6px;
      }
      .right {
        width: calc(100% - 105px - 15px);
        height: 105px;
        margin-left: 15px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p {
          color: #000;
        }
        div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            font-size: 12px;
            color: #727272;
          }
        }
        .allMoney {
          span {
            color: #f24d38;
          }
        }
      }
    }
  }
  > .orderTitle {
    width: 95%;
    margin: 15px auto;
    font-size: 15px;
    line-height: 15px;
    color: #000;
    border-left: 3px solid #ef250b;
    padding-left: 6px;
  }
  > .list {
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
    > div {
      width: 95%;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        display: flex;
        align-items: center;
        height: 40px;
        color: #000;
        font-size: 14px;
        span {
          width: 120px;
          color: #666;
          display: block;
        }
      }
      > p {
        font-size: 13px;
        color: #f24d38;
      }
    }
  }
}
</style>
